<template>
    <div class="my-collected">
        <div>
            <van-nav-bar
                    title="我的收藏"
                    left-text="返回"
                    right-text="清空"
                    left-arrow
                    @click-left="onClickLeft"
                    @click-right="onClickRight"
            />
        </div>
        <div class="lists" v-if="this.audios.length > 0">
            <audio-lists :items="audios"></audio-lists>
        </div>
        <van-empty description="在资源列表中左划可以添加收藏" v-else />
    </div>
</template>

<script>
    import AudioLists from '@/components/audio-lists/audio-lists';
    import Vue from 'vue';
    import {
        NavBar
        , Dialog
        ,Toast
        ,Empty
    } from 'vant';

    Vue.use(Dialog)
        .use(NavBar)
        .use(Toast)
        .use(Empty);

    export default {
        name: "my-collected",
        data() {
            return {
                audios: [],
                showLists: false
            }
        },
        created() {
            this.getMyCollectedRecord();
        },
        methods: {
            getMyCollectedRecord() {
                var that = this;
                this.$http.get("/resource/getAudioLists?is_get_collect=1")
                    .then((response)=>{
                    var rs = response.data;
                    if (rs.code === 1) {
                        that.audios = rs.data;
                        that.showLists = true;
                    }
                })
            },
            onClickLeft() {
                this.$router.push('/my');
            },
            onClickRight() {
                if(this.audios.length <= 0){
                    return;
                }
                Dialog.confirm({
                    title: '清空提示',
                    message: '清空之后将无法恢复，您确定需要清空收藏记录吗？',
                })
                    .then(() => {
                        this.$http.get("user/clearCollect").then((response)=>{
                            var rs = response.data;
                            Toast(rs.msg);
                            this.audios = [];
                        });
                    })
                    .catch(() => {
                        // on cancel
                    });
            }
        },
        components: {
            AudioLists
        }
    }
</script>

<style scoped>
    .my-collected >>> .audios {
        margin-top: 40px;
    }
</style>